<script setup>
import { onMounted, provide, ref, watch } from 'vue'
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'
provide('echarts', echarts)
const router = useRouter()
const route = useRoute()
const gotoLink = (path) => {
  let p = route.fullPath
  if (path == p) {
    return
  }
  router.push(path)
}
const path = ref('/')
const desH = window.innerHeight
watch(route, (newV, oldV) => {
  console.log(newV.fullPath)
  path.value = newV.fullPath
})
const scale = ref(window.innerHeight / desH)
window.addEventListener('resize', () => {
  scale.value = window.innerHeight / desH
})
provide('scale', scale)
</script>
<template>
  <div class="layout">
    <img class="bg" src="./assets/png/main.jpg" alt="" />
    <div class="header"></div>
    <div class="content">
      <Transition>
        <router-view> </router-view>
      </Transition>
    </div>

    <div class="bottom">
      <div class="bottom_center">
        <button
          :class="{ fontColor: path == '/community' }"
          @click="gotoLink('/community')"
          class="item"
        >
          社区管理
        </button>
        <button
          :class="{ fontColor: path == '/security' }"
          @click="gotoLink('/security')"
          class="item"
        >
          安保监控
        </button>
        <button :class="{ fontColor: path == '/' }" @click="gotoLink('/')" class="item">
          CIM平台
        </button>
        <button :class="{ fontColor: path == '/energy' }" @click="gotoLink('/energy')" class="item">
          能源检测
        </button>
        <button
          :class="{ fontColor: path == '/energyconservation' }"
          @click="gotoLink('/energyconservation')"
          class="item"
        >
          节能分析
        </button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
/* 下面我们会解释这些 class 是做什么的 */

.bg {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 24rem;
  height: 100%;
  z-index: -100;
}
.header {
  height: 0.25rem;
  width: 24rem;
}

.fontColor {
  color: #2db8cc !important;
}
.app {
  width: 1rem;
  height: 1rem;
}
.content {
  flex: 1;
}
.layout {
  height: 100vh;
  position: relative;
  overflow: hidden;
  // background: url('./assets/png/main.jpg');
  // background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  // box-shadow: inset 0rem 0rem 3.5rem 3.3rem rgba(0, 0, 0, 0.9); /* 添加内阴影 */
  box-shadow: inset 3rem 1rem 6.5rem 1.6rem rgba(0, 0, 0, 0.9),
    inset -3rem -1rem 6.5rem 1.6rem rgba(0, 0, 0, 0.9);

  display: flex;
  flex-direction: column;
  .bottom {
    width: 24rem;
    position: absolute;
    bottom: 0.35rem;
    height: 0.6375rem;
    display: flex;
    justify-content: center;
    align-content: center;
    .bottom_center {
      width: 9.1375rem;
      display: flex;
      justify-content: space-around;
      .item {
        cursor: pointer;
        width: 1.475rem;
        height: 0.6375rem;
        background-color: rgba(0, 0, 0, 0);
        text-align: center;
        line-height: 0.6375rem;
        border: 0.0125rem solid #4b5ccd;
        color: #fff;
        font-size: 0.3rem;
      }
      .item:nth-child(1) {
        transform: skew(20deg, 0deg);
      }
      .item:nth-child(2) {
        transform: skew(10deg, 0deg);
      }
      .item:nth-child(4) {
        transform: skew(-10deg, 0deg);
      }
      .item:nth-child(5) {
        transform: skew(-20deg, 0deg);
      }
    }
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
